$(function () {
    $("#btn").click(function () {
        getData();
        // console.log("2314");
    })

    $("#add").click(function () {
        var li = $("<li></li>");
        li.html($("#text").val());
        $("ul").append(li);
        $(".head li").click(function () {
            $(this).addClass("current").siblings().removeClass("current");
            
            var city = $(this).html();
            $.ajax({
                url: "http://api.tianapi.com/tianqi/index?key=7db75f0a8b9e89d93762b622eea1a8f0&city=" + city,
                type: "get",
                dataType: "json",
                success: function (data) {
                    // console.log(data);
                    var html = "";
                    $.each(data.newslist, function (index, item) {
                        html += `
                        <div class="weather">
                        <span class="area">${item.area}</span>
                        <span class="date">${item.date}</span>
                        <span class="week">${item.week}</span>
                        <span class="week">${item.weather}</span>
                        <span class="week">${item.real}</span>
                        </div>
                        `
                    })
                    $(".weather").html(html);
                },
            })
        });
    })

    function getData() {
        $.ajax({
            url: "http://api.tianapi.com/tianqi/index?key=7db75f0a8b9e89d93762b622eea1a8f0&city=" + $('#text').val(),
            type: "get",
            dataType: "json",
            success: function (data) {
                // console.log(data);
                var html = "";
                $.each(data.newslist, function (index, item) {
                    html += `
                    <div class="weather">
                    <span class="area">${item.area}</span>
                    <span class="date">${item.date}</span>
                    <span class="week">${item.week}</span>
                    <span class="week">${item.weather}</span>
                    <span class="week">${item.real}</span>
                    </div>
                    `
                })
                $(".weather").html(html);
            },
        })

    }
})